<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="/img/apple-icon.png">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>
        AntRpc Console
    </title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <!--     Fonts and icons     -->
    <link href="/css/google-fonts.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/fontawesome-v5.7.1-all.css">
    <!-- CSS Files -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/now-ui-dashboard.min.css" rel="stylesheet"/>
    <link href="/css/my.css" rel="stylesheet"/>
    <!-- CSS Just for demo purpose, don't include it in your project -->

</head>
<body>
<div class="wrapper ">
    <div th:replace="~{common :: #common-sidebar}"></div>
    <div class="main-panel" id="main-panel">
        <nav id="common-config-nav" class="navbar navbar-expand-lg navbar-transparent  bg-primary  navbar-absolute">
            <div class="container-fluid my-padding-left-top-0">
                <div th:replace="~{common :: #commons-nav-btns}"></div>
                <div class="collapse navbar-collapse justify-content-end w-100" id="config-navigation">
                </div>
            </div>
        </nav>
        <div class="panel-header panel-header-sm"></div>
        <div class="content">
            <div class="row">
                <div class="col-md-12">
                    <ol class="breadcrumb my-breadcrumb">
                        <li class="breadcrumb-item"><a href="/configs">环境列表</a></li>
                        <li class="breadcrumb-item">
                            <a th:href="@{'/configSpaces?envName=' + ${envName}}"
                               th:text="${envName}"></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a th:href="@{'/configKeys?envName=' + ${envName} + '&spaceName=' + ${spaceName} }"
                               th:text="${spaceName}"></a>
                        </li>
                        <li class="breadcrumb-item active">
                            <span th:if="${opr == 'new'}">新建</span>
                            <span th:if="${opr == 'edit'}">修改</span>
                            <span th:if="${opr == 'view'}">查看</span>
                        </li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-chart">
                        <div class="card-header">
                            <h5 class="card-title">新建Key-Value</h5>
                        </div>
                        <div class="card-body">
                            <form>
                                <input type="hidden" name="envName" id="env_name_elem" th:value="${envName}"/>
                                <input type="hidden" name="spaceName" id="space_name_elem" th:value="${spaceName}"/>
                                <div class="form-group">
                                    <label for="key_elem">键:</label>
                                    <input type="text" id="key_elem" name="key" class="form-control"
                                           th:readonly="${opr == 'view'}"
                                           th:value="${configItemData.key}"/>
                                </div>
                                <div class="form-group">
                                    <label for="value_elem">值:</label>
                                    <input type="text" id="value_elem" name="key" class="form-control"
                                           th:readonly="${opr == 'view'}"
                                           th:value="${configItemData.value}"/>
                                </div>
                                <div class="form-group">
                                    <label for="subscribes_elem">生效节点:</label>
                                    <ul id="subscribes_elem" class="list-group">
                                        <li
                                                th:each="it : ${subscribes}"
                                                th:class="${grayReleases.contains(it) ? 'list-group-item active' : 'list-group-item'}"
                                                th:attr="data-opr=${opr}"
                                                onclick="li_clickable(this)"
                                                th:text="${it}"></li>
                                    </ul>
                                </div>
                            </form>
                        </div>
                        <div class="card-footer">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-md-12">
                                        <button th:if="${opr == 'new' || opr == 'edit'}"
                                                class="btn btn-primary float-right mr-2" onclick="save_key_values();">
                                            保存
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div th:insert="js"></div>
<script>

    function save_key_values() {
        Swal.fire({
            title: "AntRpc Console",
            text: "确定要保存吗？保存之后将立即生效!!!",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn btn-danger",
            cancelButtonClass: "btn btn-success",
            confirmButtonText: "确定",
            buttonsStyling: false
        }).then(function (result) {
            if (result.value) {
                _internal_save_key_values();
            }
        });
    }

    function _internal_save_key_values() {
        var key = $.trim($("#key_elem").val());
        var value = $.trim($("#value_elem").val());
        var spaceName = $("#space_name_elem").val();
        var envName = $("#env_name_elem").val();
        var hostInfos = [];
        $("#subscribes_elem").find("li.active").each(function () {
            hostInfos.push($(this).text());
        });
        $.ajax({
            url: "/config/saveKey",
            type: "POST",
            data: {
                envName: envName,
                spaceName: spaceName,
                key: key,
                value: value,
                grayReleases: hostInfos.join(",")
            },
            success: function (response) {
                if (response.code === 2000) {
                    antrpc_console.showNotification("保存成功!");
                    window.setTimeout(function () {
                        window.location.href = "/configKeys?envName=" + envName + "&spaceName=" + spaceName;
                    }, 1000);
                } else {
                    antrpc_console.showNotification(response.message, {
                        "color": "danger"
                    });
                }
            }
        });
    }

    function li_clickable(li) {
        var opr = $(li).attr("data-opr");
        if (opr === "new" || opr === "edit") {
            $(li).toggleClass("active");
        }
    }

    $(document).ready(function () {
        $("#config_list_li").addClass("active");
    });

</script>
</body>
</html>